/*
主页面
*/
import { useState } from 'react';
// 时间处理依赖包
import dayjs from 'dayjs';
import weekday from 'dayjs/plugin/weekday';
dayjs.extend(weekday);
// 实时监控
import RealTimeMonitoring from './RealTimeMonitoring';
// 历史数据组件
import HistoricalData from './HistoricalData';
// 实时监测数据-page1
import dataOne from '../../node/pageOne.json';
// page2数据
import dataTwo from '../../node/pageTwo.json';
// page3数据
import dataThree from '../../node/pageThree.json';
// 姿态预测与实时监控组件
import PosturePrediction from './PosturePrediction';
import './index.less';
import { weekdayText } from './index.config';

export default function IndexPage() {
  const tableLIst = [
    {
      title: '实时监测',
    },
    {
      title: '姿态预测与参数推荐',
    },
    {
      title: '历史数据',
    },
  ];
  // 通过对象，拿到选中项，在页面中展示对应的组件
  const content: any = {
    实时监测: <RealTimeMonitoring data={dataOne} />,
    姿态预测与参数推荐: <RealTimeMonitoring data={dataTwo} />,
    历史数据: <HistoricalData data={dataThree} />,
  };
  const [tab, setTab] = useState<string>(tableLIst[0].title);

  const tabClick = (val: string) => {
    setTab(val);
  };
  const taday = dayjs().weekday();
  console.log(taday, 'taday');

  return (
    <div className="content">
      <div className="content-title">岩土工程智能化监测 课程教学案例</div>
      <div className="content-header">
        <div className="header-log"></div>
        <div className="content-title-left">
          <div className="content-title-left-top">
            <div className="top-left">福州大学</div>
            <div className="top-right">{dayjs().format('HH：mm')}</div>
          </div>
          <div className="line"></div>
          <div className="content-title-left-bottom">
            <div className="left-bottom">土木工程学院</div>
            <div className="right-bottom">
              <div className="week">{weekdayText[3]}</div>
              <div className="year-month-day">
                {dayjs().format('YYYY年MM月DD日')}
              </div>
            </div>
          </div>
        </div>
        <div className="content-title-right">
          {/* tab选项栏 */}
          {tableLIst.map((val) => {
            return (
              <div
                key={val.title}
                className={`content-title-right-item ${
                  tab == val.title ? 'active' : ''
                }`}
                onClick={() => tabClick(val.title)}
              >
                {val.title}
              </div>
            );
          })}
        </div>
      </div>
      {/* 选项对应的内容展示 */}
      <div className="content-body">{content[tab]}</div>
    </div>
  );
}
